import tpl from './index.tpl';
import './index.scss';
import tab from './tab';
import list from './list';
import {
  tplReplace
} from '../../utils/tools';
import courseData from '../../data/courseData';

export default ($) => {
  const tabComponent = tab($),
    listComponent = list();

  return {
    name: 'courseTab',
    tpl() {
      return tplReplace(tpl, {
        //tabList被替换成tabComponent下面的tpl()方法
        tablist: tabComponent.tpl(),
        //直接在这个组件中的模板字符串里调用listComponent.tpl()
        //直接传入courseData
        cardList: `<ul class="course-card-list clearfix">${listComponent.tpl(courseData)}</ul>`
      });
    },
    tabClick(onTabClick) {
      tabComponent.bindEvent(onTabClick)
    }
  }
}